<template>
	<view class="charts-box">
		<view class="chart-title" v-if="props.barTitle">
			<view class="span"></view>
			<view>{{props.barTitle}}</view>
		</view>
		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true"/>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch,
		onMounted
	} from "vue"

	const props = defineProps({
		barList: Array,
		barTitle: String,
		yTitleShow: {
			type: Boolean,
			default: false
		},
		yTitle: {
			type: String,
			default: ''
		},
		markline: Number,
	})
	const barList = computed(() => props.barList)
	const chartTitle = computed(() => props.barTitle)

	watch(() => props.barList, (value) => {
		barList.value = value
	})
	watch(() => props.barTitle, (value) => {})


	const chartData = ref({})
	const opts = ref({
		// color: ["#39B54A","#FBBD08","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
		padding: [20, 15, 0, 5],
		dataLabel: false,
		legend: {
			show: false
		},

		title: '111',
		name: '222',
		enableScroll:true,
		xAxis: {
			disableGrid: true,
			fontColor: '#455BDF',
			// labelCount: 3,
			// gridEval:8,
			itemCount:3,
			scrollShow:true,
			scrollAlign:'left',
			min:1
		},
		yAxis: {
			disableGrid: true,
			showTitle: props.yTitleShow,
			data: [{
				calibration: true,
				min: 0,
				tofix: 0,
				title: props.yTitle
			}]
		},
		extra: {
			column: {
				type: "group",
				width: 15,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
				// linearType: "custom",
				linearOpacity: 0.8,
				barBorderCircle: true,
				customColor: [
					"#ffffff",
					"#ffffff"
				]
			},
		}
	})
	
	if (props.markline) {
		opts.value.extra.markLine = {
			type: 'dash',
			data: [{
				value: props.markline,
				showLabel: true,
				labelAlign: 'right',
				labelText: `均值:${props.markline}`,
				labelOffsetX: -50,
			}]
		}
	}
	
	const getServerData = () => {
		let xData = barList.value.map(item => item.name)
		console.log('xData',xData)
		let seData = barList.value.map(item => ({
			color: item.color,
			value: item.value
		}))
		const res = {
			categories: xData,
			series: [{
					name: "数量",
					data: seData
				},
			]
		};
		chartData.value = JSON.parse(JSON.stringify(res));
		if (props.markline) {
			opts.value.yAxis.data[0].max = Math.max(...chartData.value.series[0].data.map(e=>e.value), props.markline)
		}
	}

	onMounted(() => {
		getServerData();
	});
</script>

<style lang="scss" scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 282rpx;

	}

	.chart-title {
		display: flex;
		margin-top: 30rpx;
		padding: 0 15rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 550;
		color: #1B1D20;
		line-height: 20rpx;
	}

	.span {
		margin-right: 13rpx;
		width: 13rpx;
		height: 13rpx;
		background: linear-gradient(0deg, #455BDF 0%, #5970FA 100%);
		border-radius: 50%;
	}
</style>
